import { ref } from 'vue';

import { merge } from 'lodash-es';
import { type VxeGridInstance, type VxeGridProps } from 'vxe-table';

export function useVxeTable(props: { ref: string }) {
  const xGridRef = ref<VxeGridInstance<any>>();

  return {
    xGridRef,
    gridProps: (props: VxeGridProps) => {
      // 设置默认属性
      const defaultProps: VxeGridProps = {
        // 保持原始值的状态，被某些功能所依赖，比如编辑状态、还原数据等（开启后影响性能，具体取决于数据量）
        keepSource: false,
        height: 'auto',
        border: true,
        editConfig: {
          mode: 'row',
        },
        rowConfig: {
          isCurrent: true,
        },
        // 斑马条纹
        stripe: false,
        pagerConfig: {
          enabled: true,
          size: 'mini',
          pageSize: 50,
          autoHidden: false,
        },
        // 列设置
        columnConfig: {
          // 取消列选中效果
          isCurrent: false,
          isHover: false,
          // 取消列宽拖动功能
          resizable: false,
        },
        toolbarConfig: {
          enabled: true,
          export: false,
          // print: true,
          zoom: true,
          custom: true,
          refresh: true,
          slots: {
            buttons: 'toolbar_buttons',
          },
        },
        headerAlign: 'left',
        align: 'left',
      };

      // 如果mergedProps.proxyConfig是空对象，则删除该字段，不然 vxetable 可能会误判断
      if (props.proxyConfig && JSON.stringify(props.proxyConfig) != '{}') {
        defaultProps.proxyConfig = {
          props: {
            list: 'rows',
            result: 'rows',
            total: 'total',
          },
        };
      }

      return merge({}, defaultProps, props);
    },

    triggerProxy: (code: string) => {
      const $grid = xGridRef.value;
      if ($grid) {
        $grid.commitProxy(code);
      }
    },
  };
}
